<template>
  <div class="chart-wrapper">
    <h1 class="title">柱状图</h1>
    <bar></bar>
    <h1 class="title">折线图</h1>
    <line></line>
    <h1 class="title">饼图</h1>
    <canvas id="pie" ref="pieCanvasRef" height="400"></canvas>
  </div>
</template>
  
<script setup lang='ts'>
import { onMounted, ref, reactive } from "vue";
import Bar from "../components/Bar.vue";
import Line from "../components/Line.vue";

const lineCanvasRef = ref();
const lineCanvasCtx = ref<CanvasRenderingContext2D | null>();
const pieCanvasRef = ref();
const pieCanvasCtx = ref<CanvasRenderingContext2D | null>();
// 折线图
const lineWidth = ref(0);
const lineHeight = ref(0);
const lineWidthHalf = ref(0);
const lineHeightHalf = ref(0);
// 饼图
const pieWidth = ref(0);
const pieHeight = ref(0);
const pieWidthHalf = ref(0);
const pieHeightHalf = ref(0);

const clientWidth =
  document.body.clientWidth || document.documentElement.clientWidth;

onMounted(() => {
  // initCanvasWidth();
});

const initCanvasWidth = () => {
  // 初始化折线图
  const lineCanvasDOM = lineCanvasRef.value as HTMLCanvasElement;
  lineCanvasDOM.setAttribute("width", `${clientWidth}`);
  lineCanvasCtx.value = lineCanvasDOM.getContext("2d");
  lineWidth.value = lineCanvasDOM.clientWidth;
  lineHeight.value = lineCanvasDOM.clientHeight;
  lineWidthHalf.value = lineWidth.value / 2;
  lineHeightHalf.value = lineHeight.value / 2;
  // 初始化饼图
  const pieCanvasDOM = pieCanvasRef.value as HTMLCanvasElement;
  pieCanvasDOM.setAttribute("width", `${clientWidth}`);
  pieCanvasCtx.value = pieCanvasDOM.getContext("2d");
  pieWidth.value = pieCanvasDOM.clientWidth;
  pieHeight.value = pieCanvasDOM.clientHeight;
  pieWidthHalf.value = pieWidth.value / 2;
  pieHeightHalf.value = pieHeight.value / 2;
};
</script>
<style scoped>
.chart-wrapper {
  width: 100%;
}
canvas {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #cccccc;
}

.title {
  line-height: 20px;
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
</style>